    /* 头部 */
    
    .header {
        /*  background-color: black; */
        position: relative;
    }
    
    .top {
        z-index: 10;
        height: 640px;
        padding: 0 30px;
        position: relative;
        /* background-color: rgb(0, 255, 0, .5); */
    }
    
    .header__top-top {
        /* background-color: rgba(255, 0, 255, .5); */
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .header__link {
        padding: 15px;
    }
    
    .header__top-top a {
        padding: 8px;
        font-size: 16px;
        color: white;
        font-weight: bold;
    }
    
    .top__left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .top__left img {
        width: 80px;
        height: 35px;
    }
    
    .top__right img {
        margin-right: 10px;
    }
    
    .header__top-left {
        text-align: center;
        height: 560px;
        width: 200px;
        border: none;
        background-color: rgba(255, 255, 255, 0);
        position: absolute;
        bottom: 30;
        left: 0;
        font-size: 120px;
        color: whitesmoke;
    }
    
    .header__top-right {
        border: none;
        height: 560px;
        width: 200px;
        background-color: rgba(255, 255, 255, 0);
        position: absolute;
        right: 0;
        bottom: 30;
        font-size: 120px;
        color: white;
    }
    
    .top__center {
        width: 860px;
        height: 150px;
        position: absolute;
        top: 60%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    
    .top__center-bottom,
    .top__center-top {
        height: 50%;
    }
    
    .top__center-top {
        width: 100%;
        /* background-color: rgba(255, 255, 0, .5); */
        display: flex;
        text-align: center;
        color: white;
        line-height: 60px;
    }
    
    .top__center-top-btn1,
    .top__center-top-btn2,
    .top__center-top-btn3 {
        flex: 1;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        /* background-color: #f00; */
    }
    
    .top__center-top-btn1 {
        background-color: rgb(80, 142, 243);
    }
    
    .top__center-top-btn2,
    .top__center-top-btn3 {
        background-color: rgba(0, 0, 0, .5);
    }
    /* 将中间下半部分分为三份 设置右下角跟左下角为圆角 */
    
    .top__center-bottom {
        background-color: rgb(80, 142, 243);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        align-items: center;
    }
    
    .top__center-bottom-input {
        font-size: 0;
        position: absolute;
        left: 10px;
    }
    
    .top__center-bottom-input1,
    .top__center-bottom-input2 {
        width: 300px;
        height: 50px;
        border: 1px solid silver;
        text-align: center;
        color: silver;
        font-size: 16px;
        position: relative;
    }
    
    .top__center-bottom-input1 {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    
    .top__center-bottom-input2 {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-left: 0;
    }
    
    .top__center-bottom-btn {
        position: absolute;
        right: 10px;
        width: 210px;
        height: 50px;
        border: none;
        border-radius: 10px;
        background-color: rgb(255, 31, 135);
    }
    
    .top__bottom {
        height: 130px;
        width: 500px;
        position: absolute;
        right: 0;
        bottom: 0;
        /* background-color: rgba(0, 0, 255, .5); */
        text-align: right;
    }
    
    .header__pagenum,
    .header__title,
    .header__author {
        padding-right: 30px;
        color: white;
    }
    
    .page {
        font-size: 48px;
    }
    
    .allpage {
        font-size: 24px;
    }
    
    .header__title,
    .header__author {
        font-size: 16px;
    }
    /* 轮播图 */
    
    .swiper {
        /* 隐藏掉溢出的内容 */
        overflow: hidden;
        width: 100%;
        height: 640px;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .border {
        border: 5px solid #ccc;
        background-color: #ccc;
    }
    /* 主体 */
    
    .section {
        width: 100%;
        /* background-color: #f00; */
    }
    
    .section__main1 {
        height: 180px;
        background-color: #f5f5f5;
    }
    
    .main1__img {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .img__1 {
        height: 130px;
        width: 810px;
    }
    
    .img__2 {
        height: 130px;
        width: 460px;
    }
    
    .main2 {
        /* background-color: rgba(255, 255, 0, .5); */
        height: 880px;
    }
    
    .main2__h2 {
        height: 74px;
        width: 100%;
        /* background-color: blue; */
        position: relative;
        top: 20px;
        left: 0;
    }
    
    .main2__notice {
        background-color: #02db94;
        border-radius: 20px;
        width: 180px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        display: block;
        position: absolute;
        left: 0;
        top: 17px;
    }
    
    .main2__title {
        line-height: 2;
        margin-left: 560px;
        font-size: 36px;
        color: #636363;
        text-align: center;
    }
    /* 第一部分图 */
    
    .section--one-top {
        margin-top: 20px;
        height: 360px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    
    .section--one-bottom {
        padding: 20px 0;
        height: 300px;
        display: flex;
        justify-content: space-between;
    }
    
    .section--one-li {
        width: 320px;
        height: 330px;
        border: 1px solid #ccc;
        background-color: #ffffff;
    }
    
    .section--one-li img {
        width: 320px;
        height: 220px;
    }
    
    .section--logon {
        width: 320px;
        height: 330px;
        background-color: #f8f8f8;
    }
    
    .logon__img {
        display: flex;
        justify-content: center;
    }
    
    .logon__img img {
        margin: 30px 10px;
        width: 40px;
        height: 40px;
        border: 1px solid #10b041;
        border-radius: 50px;
    }
    
    .logon__title {
        margin-top: 16px;
        font-size: 16px;
        text-align: center;
    }
    
    .logon__center {
        margin-top: 16px;
        font-size: 14px;
        color: #959595;
        text-align: center;
    }
    
    .logon__btn {
        margin-top: 30px;
        width: 280px;
        display: block;
        margin-bottom: 20px;
        border: 0;
        height: 40px;
        line-height: 40px;
        background: #10b041;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        border-radius: 3px;
        margin-left: 20px;
    }
    
    .logon__bottom {
        margin-top: 16px;
        text-align: center;
        color: #959595;
    }
    
    .logon__bottom a {
        color: #10b041;
    }
    
    .section--one-btu {
        padding: 10px 30px;
        width: 237px;
        height: 40px;
        font-size: 16px;
    }
    
    .section--one-btu a {
        font-weight: bold;
        color: #000;
    }
    
    .section--one-span {
        display: flex;
        justify-content: space-between;
        margin: 10px 20px;
    }
    
    .section--one-span a {
        color: #636363;
        font-size: 13px;
        font-weight: bold;
    }
    
    .section--one-span-a {
        color: orange;
        font-size: 15px;
        font-weight: bold;
    }
    
    .section__main3 {
        height: 680px;
        position: relative;
        background-color: #1bcdae;
    }
    
    .main3__top {
        height: 100px;
        position: relative;
        bottom: 0;
    }
    
    .main3__top-title {
        position: absolute;
        left: 45%;
        bottom: 30px;
        color: white;
        font-size: 36px;
    }
    
    .main3__top-next {
        position: absolute;
        color: white;
        right: 0;
        bottom: 10px;
        font-size: 12px;
    }
    
    .main3__section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: row;
    }
    
    .main3__section-img {
        display: flex;
        background-color: #fff;
        width: 440px;
        height: 190px;
    }
    
    .main3__section-img img {
        width: 180px;
        height: 190px;
    }
    
    .main3__section-img-right {
        position: relative;
        margin: 15px;
    }
    
    .main3__img-title {
        padding: 6px;
        font-size: 16px;
        font-weight: bold;
    }
    
    .main3__img-logo {
        border-radius: 5px;
        color: #4a90e2;
        font-size: 14px;
        padding: 0 6px;
        width: 56px;
        border: 1px solid #4a90e2;
    }
    
    .main3__img-sale {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 30px;
        color: #ff7362;
    }
    
    .main3__img-sale span {
        font-size: 16px;
    }
    
    .main3__section-bottom {
        margin: auto;
        height: 180px;
    }
    
    .main3__section-bottom-btn {
        width: 220px;
        text-align: center;
        height: 60px;
        font-size: 20px;
        color: #636363;
        border: none;
    }
    /* 主体4 */
    
    .section__main4 {
        height: 970px;
        padding: 50px;
    }
    
    .main4__main {
        padding: 40px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .section__main4-top {
        font-size: 36px;
        text-align: center;
        color: #636363;
    }
    
    .main4__top {
        margin-top: 20px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 325px;
        height: 345px;
        border: 1px solid #ccc;
    }
    
    .main4__img img {
        width: 325px;
        height: 220px;
    }
    
    .main4__img-main {
        position: absolute;
        top: 5px;
        left: -5px;
        background-color: #ff7362;
        width: 40px;
        text-align: center;
        height: 23px;
        color: white;
        font-size: 16px;
    }
    
    .main4__perpeo img {
        position: absolute;
        top: 200px;
        border: 5px solid white;
        left: 20px;
        vertical-align: top;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    
    .main4__bottom {
        position: relative;
        padding: 10px;
    }
    
    .main4__author {
        font-size: 12px;
        color: #636363;
        position: absolute;
        top: -40px;
        left: 75px;
    }
    
    .main4__title a {
        color: black;
        font-size: 18px;
        font-weight: bold;
    }
    
    .main4__bottom-icons {
        display: flex;
        justify-content: center;
    }
    
    .main4__bottom-span {
        width: 35px;
        height: 10px;
        border: none;
        background-color: #ccc;
        margin: 5px;
    }
    
    .main4__buttom-btn {
        width: 260px;
        height: 60px;
        font-size: 20px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #ccc;
    }
    
    .main4__buttom--btn {
        margin: 50px;
        text-align: center;
    }
    /* 主体5 */
    
    .section__main5 {
        background-color: #f5f5f5;
        height: 570px;
    }
    
    .main5__top {
        display: flex;
        justify-content: space-between;
        /* background-color: #10b041; */
    }
    
    .main5__top-bottom {
        margin: 30px 20px 0 0;
        border: 1px solid #ccc;
    }
    
    .main5__top-one img {
        width: 280px;
        height: 168px;
    }
    
    .main5__user {
        display: flex;
        justify-content: space-between;
    }
    
    .main5__user img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }
    
    .main5__top-one-btn {
        margin-top: 60px;
        color: #02db94;
        width: 280px;
        height: 50px;
        background-color: #fff;
        border: 1px solid #02db94;
    }
    
    .main5__top-two {
        padding-right: 20px;
    }
    
    .main5__top-two img {
        width: 283px;
        height: 430px;
        margin: 30px 20px 0 0;
    }
    
    .main5__top-title {
        font-size: 34px;
        color: #2f2824;
    }
    
    .main5__top-title3 {
        font-size: 32px;
        color: #959595;
        text-align: right;
    }
    
    .main5__top-three img {
        margin: 20px 5px 0 0;
        padding: 8px;
        width: 310px;
        height: 200px;
    }
    
    .section__main6-top {
        font-size: 24px;
        font-weight: bold;
    }
    
    .section__main6-imgs {
        display: flex;
        justify-content: space-between;
    }
    
    .section__main6-imgs ul li img {
        margin: 10px 0;
        width: 317px;
        height: 317px;
        border-radius: 20px;
    }
    
    .section__main7 {
        padding: 20px 0 60px 0;
        text-align: center;
    }
    
    .section__main7 img {
        width: 357px;
        height: 97px;
    }
    
    .section__main8 {
        display: flex;
        justify-content: space-between;
    }
    
    .main8__left {
        display: flex;
    }
    
    .main8__right {
        display: flex;
    }
    
    .main8__left h3,
    .main8__right h3 {
        margin: 0 20px;
        font-size: 28px;
        line-height: 100px;
        color: #636363;
    }
    
    .main8__left img,
    .main8__right img {
        margin: 0 20px;
        width: 90px;
        height: 90px;
    }
    /* 页尾 */
    
    .footer {
        width: 100%;
        height: 380px;
        /* background-color: rgba(0, 0, 0, .5); */
    }
    /* 页尾第一部分 */
    
    .footer .footer__main1 {
        width: 100%;
        height: 260px;
        background-color: #323232;
    }
    
    .footer .footer__main1-left {
        width: 50%;
        /* background-color: red; */
        display: flex;
        justify-content: flex-end;
    }
    
    .footer__main1-left-div {
        width: 78%;
        /* background-color:pink; */
        display: flex;
        justify-content: space-between;
        padding: 30px 0 0 15px;
    }
    
    .footer .footer__main1-right {
        width: 50%;
        /* background-color: antiquewhite; */
    }
    
    h5 {
        font-size: 15px;
        line-height: 2em;
        color: #ffffff;
    }
    
    .footer__main1 .footer__main1-div {
        line-height: 2em;
    }
    
    .footer__main1-left .footer__main1-div a {
        font-size: 15px;
        color: #c0c0c0;
        font-weight: normal;
    }
    
    .footer__main1-left .footer__main1-div a:hover {
        color: #fff;
    }
    /* 页尾第二部分 */
    
    .footer .footer__main2 {
        width: 100%;
        height: 140px;
        background-color: #242424;
        display: flex;
        /* justify-content:center; */
        flex-direction: column;
        align-items: center;
    }
    /* 页尾第二部分的第一部分 */
    
    .footer__main2 .footer__main2-top {
        width: 80%;
        height: 70px;
        display: flex;
        justify-content: center;
        /* background-color:palegoldenrod; */
    }
    
    .footer__main2-top .footer__top-logo {
        display: flex;
        justify-content: flex-start;
        width: 6%;
        padding: 15px 0 0 15px;
    }
    
    .footer__main2-top .footer__top-div {
        width: 94%;
        display: flex;
        justify-content: space-between;
        padding: 15px 0 0 15px;
        font-size: 10px;
        color: #c0c0c0;
    }
    
    .footer__main2-top .footer__top-div a {
        color: #c0c0c0;
    }
    
    .footer__main2-top .footer__top-div a:hover {
        color: #fff;
    }
    /* 页尾第二部分的第二部分 */
    
    .footer__main2-bottom {
        width: 80%;
        height: 70px;
        display: flex;
        justify-content: center;
        padding: 10px;
        /* background-color:palegoldenrod; */
    }
    
    .footer__main2-bottom .footer__main2-p {
        width: 7%;
        padding: 0 0 0 15px;
        display: flex;
        justify-content: flex-start;
        color: #2f2824;
        font-size: 15px;
        /* flex-wrap: nowrap; */
    }
    
    .footer__main2-bottom .footer__main2-div {
        width: 93%;
        display: flex;
        justify-content: flex-start;
        /* padding:15px; */
        font-size: 13px;
    }
    
    .footer__main2-div .main2-p {
        color: #2f2824;
    }
    
    .footer__main2-bottom .footer__main2-div a {
        color: #2f2824;
    }
    
    .footer__main2-bottom .footer__main2-div a:hover {
        color: #fff;
    }